<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>css3的3D旋转</title>
	<style type="text/css">
    body{height: 2000px;}
	@-webkit-keyframes spin{
     0%{
         -webkit-transform:rotateY(0);
         transform:rotateY(0);
       }
      100%{
        -webkit-transform:rotateY(360deg);
        transform:rotateY(360deg)
      }
    }
    @-moz-keyframes spin{
        0%{
            -moz-transform:rotateY(0);
            transform:rotateY(0);
        }
        100%{
            -moz-transform:rotateY(360deg);
            transform:rotateY(360deg);
        }
    }
    @-ms-keyframes spin{
        0%{
            -ms-transform:rotateY(0deg);
            transform:rotateY(0deg);
        }
        100%{
            -ms-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @-o-keyframes spin{
        0%{
            -o-transform:rotateY(0);
            transform:rotateY(0);
        }
        100%{
            -o-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @keyframes spin{
        0%{transform:rotate3d(0,0,1,0deg)}
        100%{transform:rotate3d(0,1,0,360deg)}
    }

    @keyframes rotateall{
        0%{transform:rotate3d(0,1,0,0deg)}
        100%{transform:rotate3d(0,1,0,360deg)}
    }

    .stage {
        width: 300px;
        height: 300px;
        margin: 15px auto;
        position: relative;
        /*background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;*/
        -webkit-perspective: 300px;
        -moz-perspective: 300px;
        -ms-perspective: 300px;
        -o-perspective: 300px;
        perspective: 300px;
    }
    .container {
    	width: 200px;height: 200px;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        position: absolute;
        -webkit-transform: translateZ(-100px);
        -moz-transform: translateZ(-100px);
        -ms-transform: translateZ(-100px);
        -o-transform: translateZ(-100px);
        transform: translateZ(-100px);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .container{
        -moz-animation:spin 5s linear infinite;
        -o-animation:spin 5s linear infinite;
        -webkit-animation:spin 5s linear infinite;
        -ms-animation:spin 5s linear infinite;
        animation:spin 5s linear infinite;
    }
    .side {
        background: rgba(142,198,63,0.3);
        border: 2px solid #8ec63f;
        font-size: 60px;
        font-weight: bold;
        color: #fff;
        height: 196px;
        line-height: 196px;
        position: absolute;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        text-transform: uppercase;
        width: 196px;
    }

    .front {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);
        -o-transform: translateZ(100px);
        transform: translateZ(100px);
    }
    .back {
        -webkit-transform: rotateX(180deg) translateZ(100px);
        -moz-transform: rotateX(180deg) translateZ(100px);
        -ms-transform: rotateX(180deg) translateZ(100px);
        -o-transform: rotateX(180deg) translateZ(100px);
        transform: rotateX(180deg) translateZ(100px);
    }
    .left {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -ms-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px);
    }
    .right {
        -webkit-transform: rotateY(90deg) translateZ(100px);
        -moz-transform: rotateY(90deg) translateZ(100px);
        -ms-transform: rotateY(90deg) translateZ(100px);
        -o-transform: rotateY(90deg) translateZ(100px);
        transform: rotateY(90deg) translateZ(100px);
    }
    .top {
        -webkit-transform: rotateX(90deg) translateZ(100px);
        -moz-transform: rotateX(90deg) translateZ(100px);
        -ms-transform: rotateX(90deg) translateZ(100px);
        -o-transform: rotateX(90deg) translateZ(100px);
        transform: rotateX(90deg) translateZ(100px);
    }
    .bottom {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
        -o-transform: rotateX(-90deg) translateZ(100px);
        transform: rotateX(-90deg) translateZ(100px);
    }

    .stage1{
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        -moz-animation:rotateall 5s linear infinite;
        -o-animation:rotateall 5s linear infinite;
        -webkit-animation:rotateall 5s linear infinite;
        -ms-animation:rotateall 5s linear infinite;
        animation:rotateall 5s linear infinite;
    }

    .circle{
        width: 300px;
        height: 300px;
        border-radius: 150px;
        border:1px solid red;
        transform: rotateX(-90deg) translateZ(100px);
        text-align: center;
        line-height: 300px;
        background:url(turn.jpg) 50% 50% no-repeat;
        background-size: 300px 300px; 
    }


    .bgbt2{
        margin:0 auto;
        width: 200px;
        height: 200px;
        border:1px solid red;
        transform: perspective(300px) rotateX(-60deg) translateZ(100px);
        animation: rotateall 5s linear infinite;
    }





	</style>
</head>
<body>
<div class="stage">
    <div class="container">
        <div class="side front">1</div>
        <div class="side back">2</div>
        <div class="side left">3</div>
        <div class="side right">4</div>
        <div class="side top">5</div>
        <div class="side bottom">6</div>
    </div>
</div>

<div class="stage ">
    <div class="stage1">
        <div class="circle">
        转
        </div>    
    </div>
</div>
    <div class="bgbt2">
        花
    </div>

</body>
</html>